<template>
  <div class="dy-main InsuranceOffer">
    <div class="dy-header">
       <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">报价</x-header>
    </div>
    <div class="dy-body">
      <scroller lock-x height="100%" ref="scroller">
        <div style="padding: 0.3rem 0;">
          <group gutter="0">
            <x-input title="账号" v-model="IDcard" placeholder="请输入账号" text-align="right"></x-input>
            <x-input title="被保人姓名" v-model="prdUserName" placeholder="请输入被保人姓名" text-align="right"></x-input>
            <cell title="被保人性别" :value="prdSex">
              <zx-radio style="width: 4.5rem; text-align: left;" :data="['男', '女']" :checkVal="0" @on-chang="radioChange"></zx-radio>
            </cell>
            <cell :title="('邮寄地址')" @click.native="showPopupPicker1 = true" :value="value1[0]" is-link></cell>
            <x-input title="被保人职业代码 " v-model="IDcard" placeholder="请输入被保人职业代码" text-align="right"></x-input>
            <x-input title="保费" v-model="IDcard" placeholder="请输入保费" text-align="right"></x-input>
            <x-input title="保额" v-model="IDcard" placeholder="请输入保额" text-align="right"></x-input>

            <popup-picker :show.sync="showPopupPicker1" :show-cell="false" :data="list1" v-model="value1"></popup-picker>
          </group>
          <div class="offerClick" @click="offerClick()">报价</div>
          <group gutter="0">
            <cell :title="('主险险种代码')" :value="mainRiskCode"></cell>
            <cell :title="('险种代码')" :value="riskCode"></cell>
            <cell :title="('保险费')" :value="prem"></cell>
            <cell :title="('保额')" :value="amt"></cell>
          </group>
          <div class="buyClick" :class="{'unClick': hasOfferClick === false}" @click="buyClick()">立即投保</div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value1: ['请选择'],
      list1: [['请选择', '上海市浦东新区', '北京市朝阳区', '北京市大兴区']],
      showPopupPicker1: false,
      hasOfferClick: false,
      sexCheck: true,
      mainRiskCode: '',
      riskCode: '',
      prem: '',
      amt: ''
    }
  },
  methods: {
    checkClick () {
      if (this.sexCheck) {
        this.sexCheck = false
      } else {
        this.sexCheck = true
      }
    },
    getOfferData () {
      let self = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'mstep.do?act=business', 'params': {'method_Name': 'InsuranceOfferSearch'}}),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            let data = response.data.data[0]
            self.mainRiskCode = data.mainRiskCode
            self.riskCode = data.riskCode
            self.prem = data.prem
            self.amt = data.amt
          } else {
            alert('fail')
          }
        }
      )
    },
    offerClick () {
      this.hasOfferClick = true
      this.getOfferData()
    },
    buyClick () {
      if (this.hasOfferClick) {
        this.$router.push({name: 'InsuranceInfo'})
      }
    },
    back () {
      this.$publicFun.goBack(this)
    }
  }
}
</script>

<style lang="less">
.InsuranceOffer{
  .dy-body{
    .prdUserInfo{
      background: #ffffff;
      margin: 0 auto;
      .userInfo{
        width: 92%;
        height: 0.88rem;
        line-height: 0.88rem;
        margin: 0 auto;
        font-size: 0.28rem;
        border-bottom: 1px solid #EAEAEA;
        .text{
          border: none;
          /* height: 0.86rem; */
          margin-left: 0.54rem;
          font-size: 0.28rem;
          color: #cccccc;
          outline: none;
        }
        .text1{
          width: 84%;
        }
        .text2{
          width: 71%;
        }
        .text3{
          width: 63%;
        }
        input::-webkit-input-placeholder {
          color:#cccccc;
          font-size: 0.26rem;
        }
        input:-moz-placeholder {
          color:#cccccc;
          font-size: 0.26rem;
        }
        input::-moz-placeholder {
          color:#cccccc;
          font-size: 0.26rem;
        }
        input:-ms-input-placeholder {
          color:#cccccc;
          font-size: 0.26rem;
        }
      }
      .sexCheck{
        position: relative;
        >div{
          display: inline-block;
        }
        .box1{
          height: 0.28rem;
          width: 0.28rem;
          border: 1px solid #BFBFBF;
          display:inline-block;
          position: relative;
          top: 0.06rem;
          left: 0.58rem;
          .checkIcon1{
            float: left;
            height: 0.27rem;
            width: 0.29rem;
          }
        }
        .box2{
          height: 0.28rem;
          width: 0.28rem;
          border: 1px solid #BFBFBF;
          display:inline-block;
          position: relative;
          top: 0.06rem;
          left: 1.58rem;
          .checkIcon2{
            float: left;
            height: 0.27rem;
            width: 0.29rem;
          }
        }
        .manLabel{
          margin-left: 0.8rem;
        }
        .womanLabel{
          margin-left: 1.8rem;
        }
      }
    }
    .offerClick{
      width: 92%;
      height: 1rem;
      line-height: 1rem;
      font-size: 0.34rem;
      background: #EC1B30;
      color: #fff;
      margin: 0.2rem auto;
      border-radius: 0.06rem;
      text-align: center;
      margin-top: 0.3rem;
    }
    .InsuranceInfo{
      background: #ffffff;
      margin: 0.26rem auto;
      dl{
        display: flex;
        height: 0.88rem;;
        line-height: 0.88rem;
        border-top: 1px solid #EAEAEA;
        width: 92%;
        margin: 0 auto;
      }
      dl dt,dd{
        flex: 1;
        font-size: 0.28rem;
        color: #333333;
      }
      dd{
        text-align: right;
        color: #999999;
      }
    }
    .buyClick{
      width: 92%;
      height: 1rem;
      line-height: 1rem;
      font-size: 0.34rem;
      background: #EC1B30;
      color: #fff;
      margin: 0.3rem auto 0;
      border-radius: 0.06rem;
      text-align: center;
    }
    .unClick{
      opacity: 0.5;
    }
  }
}
</style>
